<template>
	<view class="con">
		<view class="list" v-if="type == 1">
			<view class="list_nr" v-for="(item, idx) in list1" :key="idx" @click="to_click(item)">
				<image class="list_nr_img" :src="item.img1" mode="" :style="item.style" v-if="index != item.id"></image>
				<image class="list_nr_img" :src="item.img2" mode="" :style="item.style" v-else></image>
				<view class="list_nr_text" :style="index == item.id ? 'color: #000;' : ''">{{ item.text }}</view>
			</view>
		</view>
		<view class="list" v-if="type == 2" :style="bd == 1 ? 'border-top: 1px solid #f4f5f9;' : ''">
			<view class="list_nr" v-for="(item, idx) in list2" :key="idx" @click="to_click(item)">
				<image class="list_nr_img" :src="item.img1" mode="" :style="item.style" v-if="index != item.id"></image>
				<image class="list_nr_img" :src="item.img2" mode="" :style="item.style" v-else></image>
				<view class="list_nr_text" :style="index == item.id ? 'color: #000;' : ''">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	// 方式1：纯类型声明（TS可选）
	const props = defineProps({
		index: {
			// 带默认值
			type: Number,
			default: 1
		},
		type: {
			// 带默认值
			type: Number,
			default: 1
		},
		bd: {
			// 带默认值
			type: Number,
			default: 0
		}
	})

	let list1 = [
		{
			id: 1,
			path: '/pages/index/index',
			img1: '/static/tab1.png',
			img2: '/static/tab2.png',
			type: 1,
			text: '民宿公寓',
			style: 'width: 38rpx;height: 38rpx;'
		},
		{
			id: 2,
			path: '/pages/sights/sights',
			img1: '/static/tab3.png',
			img2: '/static/tab4.png',
			type: 1,
			text: '景点',
			style: 'width: 42rpx;height: 38rpx;'
		},
		{
			id: 3,
			path: '/pages/gourmet/gourmet',
			img1: '/static/tab5.png',
			img2: '/static/tab6.png',
			type: 1,
			text: '美食',
			style: 'width: 40rpx;height: 38rpx;'
		},
		{
			id: 4,
			path: '/pages/trip/trip',
			img1: '/static/tab7.png',
			img2: '/static/tab8.png',
			type: 1,
			text: '旅行社',
			style: 'width: 40rpx;height: 40rpx;'
		},
		{
			id: 5,
			path: '/pages/my/my',
			img1: '/static/tab9.png',
			img2: '/static/tab10.png',
			type: 1,
			text: '我的',
			style: 'width: 38rpx;height: 38rpx;'
		}
	]

	let list2 = ref([
		{
			id: 1,
			path: '/pages_B/landlord/landlord',
			img1: '/static/tab11.png',
			img2: '/static/tab12.png',
			type: 2,
			text: '首页',
			style: 'width: 32rpx;height: 32rpx;'
		},
		{
			id: 2,
			path: '/pages_B/order/order',
			img1: '/static/tab13.png',
			img2: '/static/tab14.png',
			type: 2,
			text: '订单',
			style: 'width: 29rpx;height: 32rpx;'
		},
		{
			id: 3,
			path: '/pages_B/listings/listings',
			img1: '/static/tab15.png',
			img2: '/static/tab16.png',
			type: 2,
			text: '房源',
			style: 'width: 31rpx;height: 32rpx;'
		}
	])

	const to_click = (item) => {
		console.log('item', item)
		if (item.type == 1) {
			uni.switchTab({
				url: item.path
			})
		} else {
			uni.redirectTo({
				url: item.path
			})
		}
	}

	onShow(() => {
		console.log('页面刷新')
	})
</script>

<style lang="less" scoped>
	.con {
		width: 750rpx;
		height: 85rpx;
		padding-top: 15rpx;
		padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
		// background-color: red;
	}
	.list {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 85rpx;
		background: #ffffff;
		padding-top: 15rpx;
		padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
		.list_nr {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.list_nr_img {
				margin-bottom: 13rpx;
			}
			.list_nr_text {
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #727272;
				line-height: 40rpx;
			}
		}
	}
</style>
